<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>查看报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <script src="/js/common/language.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
    <link href="/lib/budget/styles.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/css/budget/viewReport.css"/>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/lib/echarts/echarts.common.min.js"></script>

    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .clearfix{
            height:45px;
        }
        #u650_input{
            height:27px!important;
            top: -7px;
            background: #fff;
            width: 178px;
        }
        .M-box3 .active{
            margin: 0px 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #bdbdbd;
            text-decoration: none;
        }
    </style>

</head>
<body>
<div class="head w">
    <ul class="index_head">
        <li data-num="0"><span class="headli1_1 one" id="waitwork">预算执行报表</span><img class="headli1_2" src="../../img/twoth.png" alt="">
        </li>
        <li data-num="1"><span class="headli2_1 endWork" id="endWork">年度预算执行报表</span><img src="../../img/twoth.png" alt="" class="headli2_2">
        </li>
        <%--<li data-num="2"><span class="headli2_1 endWork" id="tongji">预算执行报表统计</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <li data-num="3"><span class="headli3" id="yusuan">项目预算统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>
        <li data-num="4"><span class="headli3 " id="mingxi">项目明细统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>

        <%--<li data-num="2"><span class="headli3 allwork" id="allwork">全部工作</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>--%>

    </ul>
</div>
<div class="clearfix">
    <div class="div_Img">
        <img src="/img/yszxbb.png" style="margin-top: 25px;margin-left: 15px;vertical-align: middle;" alt="菜单主分类设置">
    </div>
    <p class="p1">预算执行报表</p>

</div>
<div id="base" class="">

    <!-- Unnamed (提交按钮) -->
    <div id="u518" class="ax_default _提交按钮">
        <input id="u518_input" type="button" value="查询"/>
    </div>

    <!-- Unnamed (提交按钮) -->
    <div id="u519" class="ax_default _提交按钮">
        <input id="u519_input" type="submit" value="导出Excel"/>
    </div>

    <!-- Unnamed (表格) -->
    <div id="u520" class="ax_default _表格">
        <table id="uploadTable" style="width: 130% ">
            <thead>
            <tr style="background:none">
                <th class="th1">项目名称</th>
                <th class="th2" style="width: 10%;">项目申请时间</th>
                <th class="th3">项目申请人</th>
                <th class="th4" style="width: 8%;">项目申请部门</th>
                <th class="th5">预算总金额</th>
                <th class="th6">额度号</th>
                <th class="th7" style="width: 15%;">预算周期</th>
                <th class="th5">项目执行人</th>
                <th class="th5">项目负责人</th>
                <th class="th6">支出金额</th>
                <th class="th6">可用金额</th>
                <th class="th8">支出百分比</th>
                <th class="th8">审批状态</th>
                <th class="th8">操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <%--分页按钮--%>
        <div id="dbgz_pagesd" class="M-box3 fr" style="">


        </div>

    </div>


    <div id="u641" class="ax_default text_field">
        <input id="u641_input" placeholder="请选择项目名称" type="text" value=""/>
        <span class="sj"></span>

    </div>
    <div id="u672" class="ax_default text_field">


    </div>
    <div class="checkbox_btn">
        <div class="btn"><span id="confirm_btn">确定</span><span id="cancel_btn">取消</span></div>
    </div>
    <!-- Unnamed (矩形) -->
    <div id="u642" class="ax_default label">
        <div id="u642_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u643" class="text" style="visibility: visible;">
            <p><span>项目名称：</span></p>
        </div>
    </div>
    <div id="u644" class="ax_default text_field">
        <label style="margin-left: 3px;">
            <input type="text" placeholder="请选择日期" id="budgetItemBegintime" class="inputsmall"
                   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
        </label>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u645" class="ax_default label">
        <div id="u645_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u646" class="text" style="visibility: visible;">
            <p><span>查询周期：</span></p>
        </div>
    </div>


    <!-- Unnamed (文本框) -->
    <div id="u647" class="ax_default text_field">
        <label style="margin-left: 3px;">
            <input type="text" placeholder="请选择日期" id="budgetItemEndtime" readonly="readonly"
                   onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" name="sendTime"
                   style="margin-right: 5px;width:84px;height:24px;padding-left:5px;outline: none;border: 1px solid rgb(221, 221, 221);border-radius: 6px">
        </label>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u648" class="ax_default label">
        <div id="u648_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u649" class="text" style="visibility: visible;">
            <p><span>—</span></p>
        </div>
    </div>

    <!-- Unnamed (文本框) -->
    <div id="u650" class="ax_default text_field">
        <input id="u650_input"  value="" /></input>
        <a href="javascript:;" class="btns addControls" data-type="1" style="right: -137px;top: -5px;">添加</a>
        <a href="javascript:;" class="btns cleardate" style="right: -169px;top: -5px;">清空</a>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u651" class="ax_default label">
        <div id="u651_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u652" class="text" style="visibility: visible;">
            <p><span>项目执行人：</span></p>
        </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u653" class="ax_default label">
        <div id="u653_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u654" class="text" style="visibility: visible;">
            <p><span>状态：</span></p>
        </div>
    </div>
    <div id="u655" class="ax_default _下拉列表框">
        <select id="u655_input">
            <option value="" disabled selected style='display:none;'>请选择状态</option>
            <option value="0">待审批</option>
            <option value="1">已批准</option>
            <option value="2">未批准</option>
        </select>
    </div>
    <%--<div id="u656" class="ax_default text_field">
        <input id="u656_input" placeholder="请输入项目额度号" type="text" value=""/>
    </div>--%>

    <!-- Unnamed (矩形) -->
    <%--<div id="u657" class="ax_default label">
        <div id="u657_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u658" class="text" style="visibility: visible;">
            <p><span>项目额度号：</span></p>
        </div>
    </div>--%>
    <!-- Unnamed (矩形) -->
    <div id="u659" class="ax_default label">
        <div id="u659_div" class=""></div>
        <!-- Unnamed () -->
        <div id="u670" class="text" style="visibility: visible;">
            <p><span>部门：</span></p>
        </div>
    </div>


    <div id="u671" class="ax_default text_field">
        <select id="u671_input" value=""/>
        </select>
    </div>

</div>

<%--<div id="main" style="width: 1200px;height:400px;position: relative;top:80px">--%>

<%--</div>--%>
<%--<div id="baobiaoid">饼形报表图</div>--%>
<%--<div id="main1" style="width: 1200px;height:800px;position:relative;top:50px">--%>
    <%--<div class="pie"id="pie1"></div>--%>
    <%--<div class="pie"id="pie2"></div>--%>
    <%--<div class="pie"id="pie3"></div>--%>
    <%--<div class="pie"id="pie4"></div>--%>
    <%--<div class="pie"id="pie5"></div>--%>
<%--</div>--%>
</body>
<%--<script src="/js/notice/InformTheView.js"></script>--%>
<script>
    $(function(){
        $('.index_head li').click(function(){
            var datanums = $(this).attr('data-num');
            $(this).find('span').addClass('one').parent().siblings().find('span').removeClass('one');
            if (datanums == 0) {
                window.location.href = '/budget/viewReport';
            } else if (datanums == 1) {
                window.location.href = '/budget/yearViewReport';
            } else if (datanums == 2) {
                window.location.href = '/budget/reportStatistics';
            } else if (datanums ==3) {
                window.location.href = '/budget/budgetaryStatistics';
            }else if (datanums ==4) {
                window.location.href = '/budget/detailStatistics';
            }
//            } else if (datanums == 2) {
//                window.location.href = '/workflow/work/allwork';
//            }
        });
    })
    //获取所有部门
    var checkboxs = '';
    var checkbox = '';
    $.ajax({
        type: 'get',
        url: '/budget/selAllBudget',
        dataType: 'json',
        success: function (res) {
            if (res.flag) {

                $.each(res.obj, function (index, item) {
                    checkboxs =
                        checkbox += '<p><label class="u672_txt"><input type="checkbox" name="projectname" id="'+item.budgetId+'" value=\'' + item.budgetItemName + '\'>' + item.budgetItemName + '</label></p>'
                })

                $('#u672').append(checkboxs)
            }
        },
        error: function () {

        },
        complete: function () {

        }
    });
    $('.addControls').click(function () {
        user_id = $(this).siblings('input').prop('id');
        $.popWindow("../common/selectUser?0");
    });
    $(document).on('click','.cleardate',function () {
        $(this).siblings('input').val('');
        $(this).siblings('input').attr('user_id','');
        $(this).siblings('input').attr('deptid','');
        $(this).siblings('input').attr('deptname','');
        $(this).siblings('input').attr('privid','');
        $(this).siblings('input').attr('userpriv','');
        $(this).siblings('input').attr('username','');
        $(this).siblings('input').attr('dataid','');
        $(this).siblings('input').attr('userprivname','');
    })
    $('#u671_input').deptSelect(function(){
        $('#u671_input option[value="-1"]').val('').attr('deptname','');
        //进行条件查询方法，并在列表中显示
        var u_input = $('#u641_input').val();
        var Begintime = $('#budgetItemBegintime').val();
        var Endtime = $('#budgetItemEndtime').val();
        var cuter = $('#u650_input').val();
        var zhuangtai = $("#u655_input option:selected").val();
        var department = $('#u671_input option:selected').val();//部门
        var limitnum = $('#u656_input').val();//额度号
        var ajaxPage = {
            data: {
                page: 1,//当前处于第几页
                pageSize: 5,//一页显示几条
                useFlag: true,
                budgetItemName: u_input,
                budgetItemBegintime: Begintime,
                budgetItemEndtime: Endtime,
                itemExecuter: cuter,
                status: zhuangtai,
                department: department,
                lineNo: limitnum
            },
            init: function () {
            },
            page: function () {
                var me = this;
                console.log(this)
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.01
                });
                $.ajax({
                    type: 'get',
                    url: '/budget/selStatement',
                    dataType: 'json',
                    data: me.data,
                    success: function (res) {
                        $('#u520 tbody').html('');
                        // 列表信息
                        if (res.obj.length) {
                            var str = '';

                            $.each(res.obj, function (index, item) {
                                var lineNo = item.lineNo.split(',').join('')
                                str += '<tr>' +
                                    '<td title="'+item.budgetItemName+'">' + item.budgetItemName + '</td>' +
                                    '<td title="'+item.applicationDate+'">' + item.applicationDate + '</td>' +
                                    '<td title="'+item.applicant+'">' + item.applicant + '</td>' +
                                    '<td title="'+item.deptName+'">' + item.deptName + '</td>' +
                                    '<td title="'+item.itemMoney+'">' + item.itemMoney + '</td>' +
                                    '<td title="'+lineNo+'">' + lineNo + '</td>' +
                                    '<td title="'+item.budgetZhouQi+'">' + item.budgetZhouQi + '</td>' +
                                    '<td title="'+item.itemExecuter+'">' + item.itemExecuter + '</td>' +
                                    '<td title="'+item.itemManager+'">' + item.itemManager + '</td>' +
                                    '<td title="'+undefindData(item.actualExpenditure)+'">' + function(){
                                    if(undefindData(item.actualExpenditure) == ""){
                                        return 0;
                                    }else{
                                        return undefindData(item.actualExpenditure);
                                    }
                                    }() + '</td>' +
                                    '<td title="'+ undefindData(item.isPayment)+'">' + undefindData(item.isPayment) + '</td>' +
                                    '<td title="'+ undefindData(item.baiFenBi)+'">' + function(){
                                        if(undefindData(item.baiFenBi) == ""){
                                            return '0%'
                                        }else{
                                            return undefindData(item.baiFenBi)
                                        }
                                    }() + '</td>' +
                                    '<td title="'+item.allow+'">' + item.allow + '</td>' +
                                    '<td class="detail"><a href="/workflow/work/workformPreView?flowId=' + item.flowId + '&tableName=budget&flowStep=' + item.flowStep + '&runId=' + item.runId + '&prcsId=' + item.prcsId + '"  target="_blank" >查看详情</a></td>' +
                                    '</tr>';
                                layer.closeAll();

                            })
                            $('#u520 tbody').html(str);
                            me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
//                        document.getElementById('main').innerHTML='';

                        }else{
                            /*$('#uploadTable tbody').html('<span class="content">暂无数据。。。<span>');*/
                            layer.msg("暂无数据", {icon: 2})
                        }
                        // 图标信息
                        if(res.object.length){
                            var arr1 = []
                            var arr2 = []
                            var arr3 = []
                            var arr4 = []
                            var arr5 = []
                            var arr6 = []
                            for(var i=0,length=res.object.length;i<length;i++){
                                var item =  res.object[i];
                                arr1.push(parseInt(item.itemMoney))
                                arr2.push(parseInt(item.actualExpenditure))
                                arr3.push(parseInt(item.isPayment))
                                arr4.push(item.budgetItemName)
                                arr6.push(undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00 + "%")))
                            }

                            var myChart = echarts.init(document.getElementById('main'));
                            option = {
                                color: ['#3b72ff', '#ff640a', '#23af80','#f7f8f6','#f7f8f6'],
                                tooltip: {
                                    trigger: 'axis',
                                    formatter: function(a){
                                        return  (
                                            a[4].value+"<br>"+
                                            a[0].seriesName+":"+a[0].value+"<br>"+
                                            a[1].seriesName+":"+a[1].value+"<br>"+
                                            a[2].seriesName+":"+a[2].value+"<br>"+
                                            a[3].seriesName+":"+a[3].value+"<br>"
                                        )
                                    }

                                },
                                legend: {
//                                data: ['预算金额', '可用金额', '支出金额','支出百分比','项目名称','申请人']
                                    data:[
                                        {name:'预算金额'},
                                        {name:'可用金额'},
                                        {name:'支出金额'},
                                        {name:'支出百分比',textStyle:{color:'#f7f8f6'}},
                                        {name:'项目名称',textStyle:{color:'#f7f8f6'}}
                                    ]
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: arr4,
                                        axisLabel: {
                                            interval: 0
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '预算金额',
                                        type: 'bar',
                                        data: arr1

                                    },
                                    {
                                        name: '可用金额',
                                        type: 'bar',
                                        data: arr3

                                    },
                                    {
                                        name: '支出金额',
                                        type: 'bar',
                                        data: arr2

                                    },
                                    {
                                        name: '支出百分比',
                                        type: 'bar',
                                        barWidth:0,
                                        data: arr6

                                    }, {
                                        name: '项目名称',
                                        type: 'bar',
                                        barWidth:0,
                                        data: arr4

                                    }
                                ]
                            };
                            myChart.setOption(option);
                            echarts.init($('.pie')[0]).clear()
                            echarts.init($('.pie')[1]).clear()
                            echarts.init($('.pie')[2]).clear()
                            echarts.init($('.pie')[3]).clear()
                            echarts.init($('.pie')[4]).clear()
                            for(var i=0;i < arr4.length;i++){

                                myChart1 = echarts.init($('.pie')[i]);
                                option = {
                                    title : {
                                        text:arr4[i] ,
                                        /*x:'center'*/
                                        left:20
                                    },
                                    tooltip : {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        /* orient: 'vertical',*/
                                        top:'30px',
                                        x : '20px',
                                        data: ['可用金额','支出金额']
                                    },
                                    series : [
                                        {
                                            name: arr4[i],
                                            type: 'pie',
                                            radius : '55%',
                                            center: ['50%', '60%'],
                                            data:[
                                                {value:arr3[i], name:'可用金额',itemStyle: {color: '#ff0'}},
                                                {value:arr2[i], name:'支出金额',itemStyle: {color: '#ff640a'}}

                                            ],
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                myChart1.setOption(option);

                            }


                            me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
                            $('#u520 tbody').append(str)
                        }
                    }

                })

            },
            pageTwo:function (totalData, pageSize,indexs) {
                var mes=this;
                $('#dbgz_pagesd').pagination({
                    totalData: totalData,
                    showData: pageSize,
                    jump: true,
                    coping: true,
                    homePage:'',
                    endPage: '',
                    current:indexs||1,
                    callback: function (index) {
                        mes.data.page=index.getCurrent();
                        mes.page();
                    }
                });
            }

        }
        ajaxPage.data.page = 1;
        ajaxPage.data.budgetItemName = u_input,
            ajaxPage.data.budgetItemBegintime = Begintime,
            ajaxPage.data.budgetItemEndtime = Endtime,
            ajaxPage.data.itemExecuter = cuter,
            ajaxPage.data.status = zhuangtai,
            ajaxPage.data.department = department,
            ajaxPage.data.lineNo = limitnum
        ajaxPage.page()
    });




    //点击显示部门选择
    $('#u641').on('click', function () {
            $('#u672').css({display: 'block'});
            $('.checkbox_btn').css({display: 'block'})
        }
    );
    //点击确认时获取选中复选框的value
    $('#confirm_btn').on('click', function () {
        var obj = document.getElementsByName('projectname');
        var s = '';
        var id=""
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked){
                s += obj[i].value + ',';
                id += $(obj[i]).attr('id')+','
            }
        }

        $('#u641_input').val(s);
        $('#u641_input').attr('typeId',id);
        $('#u672').css({display: 'none'});
        $('.checkbox_btn').css({display: 'none'})
    });
    $('#cancel_btn').on('click', function () {

        $('#u672').css({display: 'none'});
        $('.checkbox_btn').css({display: 'none'})

    })
    function undefindData(data) {
        if (data == undefined) {
            return '';
        } else {
            return data;
        }
    }





    /**
     * 查询按钮
     */
    $("#u518_input").click(function () {
        //进行条件查询方法，并在列表中显示
        var u_input = $('#u641_input').attr('typeId')
        var Begintime = $('#budgetItemBegintime').val();
        var Endtime = $('#budgetItemEndtime').val();
        var cuter = $('#u650_input').attr('user_id');
        var zhuangtai = $("#u655_input option:selected").val();
        var department = $('#u671_input option:selected').val();//部门
        var limitnum = $('#u656_input').val();//额度号
        var ajaxPage = {
            data: {
                page: 1,//当前处于第几页
                pageSize: 5,//一页显示几条
                useFlag: true,
                budgetItemName: u_input,
                budgetItemBegindate: Begintime,
                budgetItemEnddate: Endtime,
                itemExecuter: cuter,
                status: zhuangtai,
                deptId: department,
                lineNo: limitnum
            },
            init: function () {
            },
            page: function () {
                var me = this;
                layer.msg('加载中', {
                    icon: 16
                    ,shade: 0.01
                });
                $.ajax({
                    type: 'get',
                    url: '/budget/selStatement',
                    dataType: 'json',
                    data: me.data,
                    success: function (res) {
                        $('#u520 tbody').html('');
                        // 列表信息
                        if (res.obj.length) {
                            var str = '';

                            $.each(res.obj, function (index, item) {
                                var lineNo = item.lineNo.split(',').join('')
                                str += '<tr>' +
                                    '<td title="'+item.budgetItemName+'">' + item.budgetItemName + '</td>' +
                                    '<td title="'+item.applicationDate+'">' + item.applicationDate + '</td>' +
                                    '<td title="'+item.applicant+'">' + item.applicant + '</td>' +
                                    '<td title="'+item.deptName+'">' + item.deptName + '</td>' +
                                    '<td title="'+item.itemMoney+'">' + item.itemMoney + '</td>' +
                                    '<td title="'+lineNo+'">' + lineNo + '</td>' +
                                    '<td title="'+item.budgetZhouQi+'">' + item.budgetZhouQi + '</td>' +
                                    '<td title="'+item.itemExecuter+'">' + item.itemExecuter + '</td>' +
                                    '<td title="'+item.itemManager+'">' + item.itemManager + '</td>' +
                                    '<td title="'+undefindData(item.actualExpenditure)+'">' + undefindData(item.actualExpenditure) + '</td>' +
                                    '<td title="'+ undefindData(item.isPayment)+'">' + undefindData(item.isPayment) + '</td>' +
                                    '<td title="'+ undefindData(item.baiFenBi)+'">' + undefindData(item.baiFenBi) + '</td>' +
                                    '<td title="'+item.allow+'">' + item.allow + '</td>' +
                                    '<td class="detail"><a href="/workflow/work/workformPreView?flowId=' + item.flowId + '&tableName=budget&flowStep=' + item.flowStep + '&runId=' + item.runId + '&prcsId=' + item.prcsId + '"  target="_blank" >查看详情</a></td>' +
                                    '</tr>';
                                layer.closeAll();
                                $('#u520 tbody').html(str)

                            })
//                        document.getElementById('main').innerHTML='';

                        }else{
                            /*$('#uploadTable tbody').html('<span class="content">暂无数据。。。<span>');*/
                            layer.msg("暂无数据", {icon: 2})
                        }
                        // 图标信息
                        if(res.object.length){
                            var arr1 = []
                            var arr2 = []
                            var arr3 = []
                            var arr4 = []
                            var arr5 = []
                            var arr6 = []
                            for(var i=0,length=res.object.length;i<length;i++){
                                var item =  res.object[i];
                                arr1.push(parseInt(item.itemMoney))
                                arr2.push(parseInt(item.actualExpenditure))
                                arr3.push(parseInt(item.isPayment))
                                arr4.push(item.budgetItemName)
                                arr6.push(undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00 + "%")))
                            }

                            var myChart = echarts.init(document.getElementById('main'));
                            option = {
                                color: ['#3b72ff', '#ff640a', '#23af80','#f7f8f6','#f7f8f6'],
                                tooltip: {
                                    trigger: 'axis',
                                    formatter: function(a){
                                        return  (
                                            a[4].value+"<br>"+
                                            a[0].seriesName+":"+a[0].value+"<br>"+
                                            a[1].seriesName+":"+a[1].value+"<br>"+
                                            a[2].seriesName+":"+a[2].value+"<br>"+
                                            a[3].seriesName+":"+a[3].value+"<br>"
                                        )
                                    }

                                },
                                legend: {
//                                data: ['预算金额', '可用金额', '支出金额','支出百分比','项目名称','申请人']
                                    data:[
                                        {name:'预算金额'},
                                        {name:'可用金额'},
                                        {name:'支出金额'},
                                        {name:'支出百分比',textStyle:{color:'#f7f8f6'}},
                                        {name:'项目名称',textStyle:{color:'#f7f8f6'}}
                                    ]
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: arr4,
                                        axisLabel: {
                                            interval: 0
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '预算金额',
                                        type: 'bar',
                                        data: arr1

                                    },
                                    {
                                        name: '可用金额',
                                        type: 'bar',
                                        data: arr3

                                    },
                                    {
                                        name: '支出金额',
                                        type: 'bar',
                                        data: arr2

                                    },
                                    {
                                        name: '支出百分比',
                                        type: 'bar',
                                        barWidth:0,
                                        data: arr6

                                    }, {
                                        name: '项目名称',
                                        type: 'bar',
                                        barWidth:0,
                                        data: arr4

                                    }
                                ]
                            };
                            myChart.setOption(option);
                            echarts.init($('.pie')[0]).clear()
                            echarts.init($('.pie')[1]).clear()
                            echarts.init($('.pie')[2]).clear()
                            echarts.init($('.pie')[3]).clear()
                            echarts.init($('.pie')[4]).clear()
                            for(var i=0;i < arr4.length;i++){

                                myChart1 = echarts.init($('.pie')[i]);
                                option = {
                                    title : {
                                        text:arr4[i] ,
                                        /*x:'center'*/
                                        left:20
                                    },
                                    tooltip : {
                                        trigger: 'item',
                                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                                    },
                                    legend: {
                                        /* orient: 'vertical',*/
                                        top:'30px',
                                        x : '20px',
                                        data: ['可用金额','支出金额']
                                    },
                                    series : [
                                        {
                                            name: arr4[i],
                                            type: 'pie',
                                            radius : '55%',
                                            center: ['50%', '60%'],
                                            data:[
                                                {value:arr3[i], name:'可用金额',itemStyle: {color: '#ff0'}},
                                                {value:arr2[i], name:'支出金额',itemStyle: {color: '#ff640a'}}

                                            ],
                                            itemStyle: {
                                                emphasis: {
                                                    shadowBlur: 10,
                                                    shadowOffsetX: 0,
                                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                                }
                                            }
                                        }
                                    ]
                                };
                                myChart1.setOption(option);

                            }

                            me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
                            $('#u520 tbody').append(str)
                        }
                    }

                })

            },
            pageTwo: function (totalData, pageSize, indexs) {
                var mes = this;
                $('#dbgz_pagesd').pagination({
                    totalData: totalData,
                    showData: pageSize,
                    prevContent:'上一页',
                    nextContent:'下一页',
                    jump: true,
                    coping: true,
                    homePage: '',
                    endPage: '',
                    current: indexs || 1,
                    callback: function (index) {
                        mes.data.page = index.getCurrent();
                        mes.page();
                    }
                });
            }
        }
        ajaxPage.data.page = 1;
//        ajaxPage.data.budgetItemName = u_input,
//            ajaxPage.data.budgetItemBegintime = Begintime,
//            ajaxPage.data.budgetItemEndtime = Endtime,
//            ajaxPage.data.itemExecuter = cuter,
//            ajaxPage.data.status = zhuangtai,
//            ajaxPage.data.department = department,
//            ajaxPage.data.lineNo = limitnum
        ajaxPage.page()
    })
    $("#u519_input").click(function () {
        window.location.href = "<%=basePath%>/budget/outputStatement";
    })
</script>
</html>
